<template>
  <div>
    <div>shimi2 只有登录上才能被访问</div>
    <Myinput :value="msg" @input="getMsg" />
    <br />
    <span>{{ msg }}</span>
    <br />
    <Myinput v-model="msg" />
    <br />
    <span>{{ msg }}</span>

    <!-- 自定义事件也可以用于创建支持 v-model
    的自定义输入组件。实现了在组件里使用v-model -->

    <!-- 
      $event: 代表分发事件时传递的数据
      浏览器自动分发事件时, 会传递一个包含所有相关事件数据的对象(event)
    -->
  </div>
</template>

<script type="text/ecmascript-6">
import Myinput from "./Myinput/Myinput.vue";
export default {
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    //这个是 自定义事件监听的回调函数
    getMsg(value) {
      // 自定义事件监听, 接收什么数据是分发自定义事件时指定
      //如果是浏览器分发事件时, 指定的数据是event对象(包含所有相关数据)
      this.msg = value;
    },
  },
  components: {
    Myinput,
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus"></style>
